<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>modest百度前端训练营</title>
    <!-- 导入相关样式文件 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/selector.css">

</head>

<body>
    <div class="header-box">
        <!-- 导航栏 -->
        <div class="navbar">
            <!-- 左侧logo -->
            <div class="left-logo-navbar">
                <img src="./statics/logo.png" width="121" height="21" style="cursor: pointer;" alt="">
            </div>
            <!-- 右侧按钮 -->
            <div class="header-btn">管理中心</div>
            <!-- 右侧链接 -->
            <div class="right-links-navbar">
                <ul class="header-links ">
                    <li class="college-infos">
                        <a href="javascript:;" style="color:#fff;" class="lk">开发文档</a>
                        <div class="college-menu">
                            <ul>
                                <li>
                                    <a href="javascript:;" style="color:#fff;">介绍文档</a>
                                </li>
                                <li>
                                    <a href="javascript:;" style="color:#fff;">设计文档</a>
                                </li>
                                <li>
                                    <a href="javascript:;" style="color:#fff;">开发调试</a>
                                </li>
                                <li>
                                    <a href="javascript:;" style="color:#fff;">第三方平台</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="college-infos">
                        <a href="javascript:;" style="color:#fff;" class="lk">交流中心</a>
                        <div class="college-menu">
                            <ul>
                                <li>
                                    <a href="javascript:;" style="color:#fff;">智能学堂</a>
                                </li>
                                <li>
                                    <a href="javascript:;" style="color:#fff;">开发者社区</a>
                                </li>
                                <li>
                                    <a href="javascript:;" style="color:#fff;">新闻中心</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="college-infos">
                        <a href="javascript:;" style="color:#fff;" class="lk">服务市场</a>
                    </li>
                    <li class="college-infos">
                        <a href="javascript:;" style="color:#fff;" class="lk">开源联盟</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="text">百度前端训练营2021开营了，赶紧报名吧！</div>
    </div>
    <!-- 报名区域 -->
    <section class="form-section">
        <div class="inner-content form-con">
            <div class="form " id="form">
                <div class="school">
                    <div>您的学校：</div>
                    <div class="select" id="school-select"></div>
                </div>
                <div class="grade">
                    <div>您的年级：</div>
                    <div class="select" id="grade-select"></div>
                </div>
                <div class="email">
                    <div>您的邮箱：</div>
                    <div><input type="text" placeholder="请输入您的邮箱" id="email-input"></div>
                </div>
                <div class="submit">
                    <div id="submit-button">报名</div>
                </div>
            </div>
            <div class="hidden" id="submit-info" hidden>
                <h2>报名成功！开始您的学习之旅吧！</h2>
                <div id="re-signup">重新报名</div>
            </div>
        </div>
        <div class="inner-content msg-con">
            <div class="" id="msg-box" data-type=""></div>
        </div>
    </section>
    <!-- 内容区域 -->
    <div class="center content">
        <!-- 宗旨 -->
        <div class="purpose">
            <h1 class="purpose-title">我们的宗旨</h1>
            <div class="purpose-list">
                <div class="purpose-item">
                    <span>自律独立思考</span>
                    <img src="./statics/pur1.jpg" alt="">
                </div>
                <div class="purpose-item">
                    <span>实践</span>
                    <img src="./statics/pur2.jpg" alt="">
                </div>
                <div class="purpose-item">
                    <span>总结回顾</span>
                    <img src="./statics/pur3.jpg" alt="">
                </div>
                <div class="purpose-item">
                    <span>分享交流</span>
                    <img src="./statics/pur4.jpg" alt="">
                </div>
            </div>
        </div>
        <!-- 课程安排 -->
        <div class="curriculum">
            <div class="curriculum-title">课程安排</div>
            <div class="center select">
                <ul>
                    <li class="cur">全部</li>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                </ul>
            </div>
            <div class="curriculum-list">
                <ul>
                    <li class="curriculum-item">
                        <div class="curriculum-item-box"> <img src="./statics/html.jpg" alt="">
                            <div class="project">
                                <div class="title">第一课 HTML基础</div>
                                <p>这里是HTML课程的内容概要，这里是HTML课程的内容概要，这里是HTML课程的内容概要，这里是HTML课程的内容概要，这里是HTML课程的内容概要，这里是HTML课程的内容概要</p>
                                <span style="background-color: #a9bcff;">HTML</span>
                            </div>
                        </div>
                    </li>
                    <li class="curriculum-item">
                        <div class="curriculum-item-box"> <img src="./statics/css.jpg" alt="">
                            <div class="project">
                                <div class="title">第二课 CSS基础</div>
                                <p>这里是CSS课程的内容概要，这里是CSS课程的内容概要，这里是CSS课程的内容概要，这里是CSS课程的内容概要，这里是CSS课程的内容概要，这里是CSS课程的内容概要</p>
                                <span style="background-color: #327436;">CSS</span>
                            </div>
                        </div>
                    </li>
                    <li class="curriculum-item">
                        <div class="curriculum-item-box"> <img src="./statics/web.jpg" alt="">
                            <div class="project">
                                <div class="title">第三课 Web布局（上）</div>
                                <p>这里是Web（上）课程的内容概要，这里是Web（上）课程的内容概要，这里是Web（上）课程的内容概要，这里是Web（上）课程的内容概要</p>
                                <span style="background-color: #335173;">JavaScript</span>
                            </div>
                        </div>
                    </li>
                    <li class="curriculum-item">
                        <div class="curriculum-item-box"> <img src="./statics/web.jpg" alt="">
                            <div class="project">
                                <div class="title">第四课 Web布局（下）</div>
                                <p>这里是Web（下）课程的内容概要，这里是Web（下）课程的内容概要，这里是Web（下）课程的内容概要，这里是Web（下）课程的内容概要，这里是Web（下）课程的内容概要</p>
                                <span style="background-color: #335173;">JavaScript</span>
                            </div>
                        </div>
                    </li>
                    <li class="curriculum-item">
                        <div class="curriculum-item-box"> <img src="./statics/javascript.jpg" alt="">
                            <div class="project">
                                <div class="title">第五课 JavaScript基础（上）</div>
                                <p>这里是JavaScript（上）课程的内容概要，这里是JavaScript（上）课程的内容概要，这里是JavaScript（上）课程的内容概要，这里是JavaScript（上）课程的内容概要，这里是JavaScript（上）课程的内容概要</p>
                                <span style="background-color: #a9bcff;">HTML</span>
                                <span style="background-color: #327436;">CSS</span>
                                <span style="background-color: #335173;">JavaScript</span>
                            </div>
                        </div>
                    </li>
                    <li class="curriculum-item">
                        <div class="curriculum-item-box"> <img src="./statics/javascript.jpg" alt="">
                            <div class="project">
                                <div class="title">第六课 JavaScript基础（下）</div>
                                <p>这里是JavaScript（下）课程的内容概要，这里是JavaScript（下）课程的内容概要，这里是JavaScript（下）课程的内容概要，这里是JavaScript（下）课程的内容概要，这里是JavaScript（下）课程的内容概要</p>
                                <span style="background-color: #a9bcff;">HTML</span>
                                <span style="background-color: #327436;">CSS</span>
                                <span style="background-color: #335173;">JavaScript</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 底部区域 -->
    <div class="footer">
        <div class="center footer-flex">
            <!-- 左边图标 -->
            <div class="footer-left">
                <ul class="cir-list">
                    <li class="cir">I</li>
                    <li class="cir">F</li>
                    <li class="cir">E</li>
                </ul>
            </div>
            <!-- 右边友情链接 -->
            <div class="footer-right">
                <div class="footer-mode">
                    <h4>Links</h4>
                    <ul class="info-list">
                        <li>
                            <a href="javascript:;">百度技术培训中心</a>
                        </li>
                        <li>
                            <a href="javascript:;">百度技术</a>
                        </li>
                        <li>
                            <a href="javascript:;">技术培训中心</a>
                        </li>
                        <li>
                            <a href="javascript:;">百度技术培训中心</a>
                        </li>
                        <li>
                            <a href="javascript:;">百度技术</a>
                        </li>
                    </ul>
                </div>
                <div class="footer-mode">
                    <h4>Links</h4>
                    <ul class="info-list">
                        <li>
                            <a href="javascript:;">百度技术培训中心</a>
                        </li>
                        <li>
                            <a href="javascript:;">百度技术</a>
                        </li>
                        <li>
                            <a href="javascript:;">技术培训中心</a>
                        </li>
                        <li>
                            <a href="javascript:;">百度技术培训中心</a>
                        </li>
                        <li>
                            <a href="javascript:;">百度技术</a>
                        </li>
                    </ul>
                </div>
                <div class="footer-mode">
                    <h4>Links</h4>
                    <ul class="info-list">
                        <li>
                            <a href="javascript:;">百度技术培训中心</a>
                        </li>
                        <li>
                            <a href="javascript:;">百度技术</a>
                        </li>
                        <li>
                            <a href="javascript:;">技术培训中心</a>
                        </li>
                        <li>
                            <a href="javascript:;">百度技术培训中心</a>
                        </li>
                        <li>
                            <a href="javascript:;">百度技术</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 导入选择菜单组件 -->
    <script src="./js/menu.js"></script>
    <!-- 导入组件数据 -->
    <script src="./js/load_data.js"></script>
    <!-- 报名相关事件函数 -->
    <script src="./js/form_events.js"></script>
    <!-- 主页面js -->
    <script src="./js/index.js"></script>
</body>

</html>